<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/alert.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/index.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/autoComplete.css">
  </script>
<style scoped>
    #tcCatgId_tree{
        height: 130px !important;
    }
    .layui-form-label {
        width: 80px;
        font-size: 10px;
    }
    .layui-btn-container .layui-btn+.layui-btn {
        margin-left: 20px;
    }


    .layui-input {
        width: auto;
    }

    #layuiadmin-form-project {
        text-align: center;
    }

    .footer {
        justify-content: center;
    }

    #showData {
        margin-top: 10px;
    }
    .layui-layer-admin .layui-layer-content{
        padding: 0 20px 0 20px;
    }
    .FalseTage{
        color: red;
        font-size: 19px;
        position: absolute;
        left: 4px;
        top: 4px;
    }
    .layui-input{
        width: 160px;
    }
</style>
<div class="layui-form row" lay-filter="layuiadmin-form-project" id="layuiadmin-form-project">
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalseTage">*</i>项目名称：</label>
        <div class="layui-input-block">
            <input lay-verify="required" type="text" name="tcMaintName" placeholder="项目名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalseTage">*</i>保养部位：</label>
        <div class="layui-input-block">
            <input lay-verify="required" type="text" name="tcMaintPart" placeholder="项目单位" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="max-height: 130px;overflow: auto;">
        <label class="layui-form-label"><i class="FalseTage">*</i>保养说明：</label>
        <div class="layui-input-block">
            <textarea lay-verify="required" name="tcMaintDsc" placeholder="江西通佳有限公司" class="layui-textarea"></textarea>
        </div>
    </div>
     <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalseTage">*</i>文档类型：</label>
        <div class="layui-input-block">
            <input type="text" id="tcCatgId" name="" class="layui-input" autocomplete="off" lay-verify="required" value="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="FalseTage">*</i>相关文档：</label>
        <div class="layui-input-block">
            <select type="text" id="treeSelect" name="tcDocName" placeholder="设备文档" autocomplete="off" lay-search disabled lay-verify="required" lay-filter="tcDocName">
                <option value=""></option>
            </select>
        </div>
    </div>
    <!-- 隐藏的id -->
    <input type="hidden" name='tcMaintDocid' autocomplete="off" class="layui-input" id="MainDocId">
    <!-- 按钮组合 -->
    <div class="footer layui-btn-container">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="btn1 layui-btn layui-btn-radius layui-btn-primary"
                    lay-filter="layuiadmin-app-form-submit" lay-submit>确定</button>
                <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'api', 'table', 'laytpl', 'utill', 'laydate', 'treeSelect','tree'], function () {
        var $ = layui.$,
            admin = layui.admin,
            view = layui.view,
            api = layui.api,
            table = layui.table,
            setter = layui.setter,
            laytpl = layui.laytpl,
            jquery = layui.jquery,
            laydate = layui.laydate,
            form = layui.form,
            layer = layui.layer,
            tree = layui.tree,
            utill = layui.utill,
            treeSelect = layui.treeSelect;
            // function wd(data){
            //     if(data){
            //         $('#treeSelect').empty()
            //         $('#treeSelect').removeAttr('disabled');
            //         admin.req({
            //             url: api.host + api.sbwd.doSelectList,
            //             type: 'post',
            //             contentType: 'application/json',
            //             data:JSON.stringify({
            //                 tcCatgId: data,
            //                 pageNum: 1,
            //                 pageSize: 10000
            //             }),
            //             done: function (res) {
            //                 var str = '<option value=""></option>'
            //                 for (let index = 0; index < res.data.list.length; index++) {
            //                     if(res.data.list[index] == null){
            //                         continue
            //                     }else{
            //                         str = str + `<option value="${res.data.list[index].tcDocId}">${res.data.list[index].tcDocName}</option>`
            //                     }
            //                 }
            //                 $('#treeSelect').html(str);
            //                 form.render();
            //             }
            //         });
            //     }
            // }
            // admin.req({
            //     url: api.host + api.selectoption,
            //     done: function (res) {
            //         function transferKey(odata) {
            //             odata.forEach(obj => {
            //                 obj.title = obj.tcCatgName
            //                 obj.children = obj.childList
            //                 delete obj["tcCatgName"]
            //                 delete obj["childList"]
            //                 if (obj.children instanceof Array) {
            //                     transferKey(obj.children)
            //                 }
            //             })
            //             return odata
            //         }
            //         odataArr = transferKey(res.data)
            //         treeSelect.render({
            //             elem: "#tcCatgId",
            //             node: odataArr,
            //             done: (data) => {
            //                 $("#tcCatgId").val(data.data.title);
            //                 wd(data.data.tcCatgId);
            //             }
            //         })
            //     }
            // });
            
            // $("#tcCatgId").click(function(){
            //     admin.popup({
            //     title: '文档类型',
            //     area: ['400px', '480px'],
            //     id: 'LAY-popup-content-tags',
            //     success: function (layero, index) {
            //     view(this.id).render('maintain/alert/tree_alert').done(function () {
                  
            //     });
            //     }
            // });
            // })
    })
</script>